<template>
  <div class="list" @mousewheel="scrollHight">
    <van-icon
    v-if="scrollBol"
      name="arrow-up"
      color="#f1f2f1"
      class="toUp"
      @click="scrollToUp"
    />
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-swipe-cell v-for="(item, index) in list" :key="index">
        <van-cell
          ><div class="item">
            <div
              class="title"
              @click="$router.push({ path: `/detail/${item.art_id}` })"
            >
              {{ item.title }}
            </div>
            <div class="image" v-if="item.cover.images">
              <img
                v-for="(item2, index2) in item.cover.images"
                :key="index2"
                :src="item2"
                alt=""
              />
            </div>
            <div class="bottom">
              <div class="setTop" @click="setTop(item, index)">置顶</div>
              <div class="author">{{ item.aut_name }}</div>
              <div class="commentsNum">{{ item.comm_count }}评论</div>
              <div class="time">{{ item.pubdate | difftime }}</div>
            </div>
          </div></van-cell
        >
        <template #right>
          <van-button square type="danger" text="删除" @click="dlbtn(item)" />
          <van-button
            square
            type="primary"
            text="收藏"
            @click="collect(item)"
          />
        </template>
      </van-swipe-cell>
    </van-list>
    <div class="popup">
      <van-popup
        class="middle"
        v-model="deleteShow"
        get-container="#popup"
        round
      >
        <ul>
          <li @click="dislike">不感兴趣</li>
          <li @click="detail">
            反馈垃圾内容<van-icon name="arrow" class="more"></van-icon>
          </li>
          <li @click="blackAuthor">拉黑作者</li>
        </ul>
      </van-popup>
      <van-popup
        class="middle2"
        v-model="detailShow"
        get-container="#popup"
        round
        closeable
        close-icon="arrow-left"
        close-icon-position="top-left"
        @click-close-icon="clickIcon"
      >
        <ul>
          <li @click="reportArticle($event)">其他问题</li>
          <li @click="reportArticle($event)">表情夸张</li>
          <li @click="reportArticle($event)">低俗色情</li>
          <li @click="reportArticle($event)">错别字多</li>
          <li @click="reportArticle($event)">旧闻重发</li>
          <li @click="reportArticle($event)">广告软文</li>
          <li @click="reportArticle($event)">内容不实</li>
          <li @click="reportArticle($event)">涉嫌违法犯罪</li>
          <li @click="reportArticle($event)">侵权</li>
        </ul>
      </van-popup>
    </div>
  </div>
</template>

<script>
import {
  apiGetArticle,
  apiDislike,
  apiBlackAuthor,
  apiReportArticle,
  apiCollectDetail
} from '../../../api/article'
export default {
  name: 'articleList',
  props: ['active', 'upIcon'],
  data () {
    return {
      loading: false,
      finished: false,
      list: [],
      deleteShow: false,
      detailShow: false,
      articleId: '',
      artItem: {},
      autId: '',
      reportType: [
        { text: '其他问题', type: 0 },
        { text: '表情夸张', type: 1 },
        { text: '低俗色情', type: 2 },
        { text: '错别字多', type: 3 },
        { text: '旧闻重发', type: 4 },
        { text: '广告软文', type: 5 },
        { text: '内容不实', type: 6 },
        { text: '涉嫌违法犯罪', type: 7 },
        { text: '侵权', type: 8 }
      ],
      scrollBol: false
    }
  },
  methods: {
    scrollHight () {
      if (window.pageYOffset > 1000) {
        this.scrollBol = true
      } else if (window.pageYOffset <= 1000) {
        this.scrollBol = false
      }
    },
    scrollToUp () {
      window.scrollTo({
        top: 0,
        left: 0,
        behavior: 'smooth'
      })
      this.scrollBol = false
    },
    deleteArticleId () {
      for (let i = 0; i < this.list.length; i++) {
        if (this.list[i].art_id === this.articleId) {
          console.log(this.articleId)
          this.list.splice(i, 1)
        }
      }
      this.articleId = ''
      this.autId = ''
    },
    deleteAutId () {
      for (let i = 0; i < this.list.length; i++) {
        if (this.list[i].aut_id === this.autId) {
          this.list.splice(i, 1)
          i--
        }
      }
      this.articleId = ''
      this.autId = ''
    },
    async collect (item) {
      const res = await apiCollectDetail(item.art_id)
      console.log(res)
      if (res.data.message === 'OK') {
        this.$toast.success('收藏成功')
      }
    },
    async onLoad () {
      const res = await apiGetArticle(this.active, {
        channel_id: this.active,
        timestamp: Date.now(),
        with_top: 0
      })
      this.list.push(...res.data.data.results)
      this.list.forEach((value, index) => {
        if (value.is_top === 1) {
          console.log(value)
          this.list.unshift(this.list.slice(index, index + 1))
        }
      })
      this.loading = false
      if (res.data.data.results.length < 1) {
        this.finished = true
      }
    },
    dlbtn (item) {
      this.deleteShow = true
      this.articleId = item.art_id
      this.autId = item.aut_id
      this.artItem = item
    },
    detail () {
      this.deleteShow = false
      this.detailShow = true
    },
    clickIcon () {
      this.deleteShow = true
      this.detailShow = false
    },
    async dislike () {
      apiDislike(this.articleId)
      this.deleteArticleId()
      this.deleteShow = false
      this.$toast.success({
        message: '提交成功'
      })
    },
    async blackAuthor () {
      apiBlackAuthor(this.artItem.aut_id)
      this.deleteAutId()
      this.deleteShow = false
      this.$toast.success({
        message: '提交成功'
      })
    },
    async reportArticle (e) {
      let reportId = ''
      for (let i = 0; i < this.reportType.length; i++) {
        if (this.reportType[i].text === e.target.innerHTML) {
          reportId = this.reportType[i].type
        }
      }
      this.deleteShow = false
      this.detailShow = false
      const res = await apiReportArticle({
        artid: this.articleId,
        type: reportId
      })

      console.log(res)
      if (res.data.message === 'OK') {
        this.$toast.success({
          message:
            '您的反馈，我们已经接收，我们会在三个工作日内给您答案，请而心等待'
        })
      }
      this.deleteArticleId()
      this.deleteShow = false
    },
    setTop (item, index) {
      this.list.unshift(...this.list.splice(index, 1))
    }
  },
  watch: {
    active: async function (val, oldval) {
      this.list = []
      this.$toast.loading({
        duration: 0 // 持续展示 toast,
      })
      await this.onLoad()
      this.$toast.clear()
    }
  },
  deactivated () {
    this.$toast.clear()
  }
}
</script>

<style lang="less" scoped>
.list {
  position: relative;
  .van-icon.toUp {
    position: fixed;
    right: 10px;
    bottom: 80px;
    background-color:#b7edf9;
    z-index: 999;
  }
}
.item {
  margin-top: 5px;
  .title {
    font-size: 16px;
    font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
    font-weight: 400;
    text-align: left;
    color: #3a3a3a;
    letter-spacing: 2px;
  }
  .image {
    img {
      height: 84px;
    }
  }

  .bottom {
    width: 100%;
    font-size: 12px;
    font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
    font-weight: 400;
    text-align: left;
    color: #b5b5b5;
    letter-spacing: 1px;
    margin-top: 5px;
    display: flex;

    .setTop {
      color: #e22829;
    }
    .author {
      margin: 0 5px;
    }
    .commentsNum {
      margin-right: 5px;
    }
  }
}
.van-popup--center.van-popup--round {
  width: 200px;
  height: 90px;
  text-align: center;
  padding: 10px;
  li {
    border-bottom: 1px solid #e4ddd7;
    padding-bottom: 7px;
    padding-top: 5px;
    font-size: 16px;
    position: relative;
    .more {
      position: absolute;
      right: 5px;
      top: 6px;
      font-size: 20px;
      color: #e4ddd7;
    }
  }
}
/deep/ .van-popup--center.van-popup--round.middle2 {
  padding-top: 25px;
  height: 300px;
}
.middle {
  div.van-pull-refresh {
    .van-button--square {
      border-radius: 8px !important;
      height: 100% !important;
      margin-right: 2px;
    }
  }
}
</style>
